<template>
    <div class="content">
        <div v-if="car_show==0">

            <div class="search-box">
                <van-icon class="back pull-left" name="arrow-left" @click="$router.back(-1)"/>
                <van-search class="search" background="none" autofocus="true" v-model="value" placeholder="请输入搜索关键词"
                            show-action shape="round">
                    <div slot="action" class="search-btn" @click="searchKeyword">搜索</div>
                </van-search>
            </div>

            <van-row class="page-block" v-if="list.length>0">
                <div class="inx-public-title">
                    <img class="icon" src="@/assets/images/icon/three.svg">
                    <span class="text">相关车辆</span>

                    <router-link :to="{name:'buyIndex',query:{keyword:value}}" class="more">更多</router-link>
                </div>
                <div class="list-cell">
                    <template v-for="(item,index) in list">
                        <router-link :to="{name:'buyDetail',query:{id:item.id}}" class="media-list">
                            <van-image fit="cover" class="media-list-logo pull-left" lazy-load
                                       :src="img(item.series.series_thumb,item.head_img)">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                </template>
                            </van-image>
                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.car_name}}</div>
                                <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}公里
                                </div>
                                <div class="media-list-text-bottom">
                                    <span class="pull-left">{{item.price}}万</span>
                                </div>
                                <ul class="pull-right msg-num">
                                    <li class="item good">{{item.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>
                        </router-link>
                    </template>
                </div>

            </van-row>
            <van-row class="page-block" v-if="articleList.length>0">
                <div class="inx-public-title">
                    <img class="icon" src="@/assets/images/icon/write.svg">
                    <span class="text">相关文章</span>

                    <router-link :to="{name:'message',query:{cat:-1,keyword:value}}" class="more">更多</router-link>
                </div>

                <div class="list-cell no-border">
                    <div v-for="item in articleList">
                        <router-link :to="{name:'msgDetail',query:{id:item.article_id}}" class="media-msg-list">
                            <van-image fit="cover" class="media-list-logo pull-left" lazy-load :src="img(item.thumb)">
                                <template v-slot:loading>
                                    <van-loading type="spinner" size="20"/>
                                </template>
                            </van-image>

                            <div class="media-list-body pull-left">
                                <div class="media-list-text-top">{{item.title}}</div>
                                <div class="media-list-text-tps">
                                    <span class="pull-left">发布者：{{item.author}}</span>
                                    <span class="pull-right">{{stampToDate(item.publish_time)}}</span>
                                </div>
                                <ul class="pull-right msg-num">
                                    <li class="item good">{{item.good_numb||0}}</li>
                                    <li class="item star">{{item.collectCount||0}}</li>
                                    <li class="item book">{{item.msgCount||0}}</li>
                                </ul>
                            </div>
                        </router-link>
                    </div>
                </div>
            </van-row>


            <Footer active="home"></Footer>
        </div>

        <SearchCar @seaData="getBackData" @cancel="seaCancel" v-if="car_show==1" type="1"></SearchCar>

    </div>
</template>

<script>
    import Footer from '../../components/footer'
    import Header from '../../components/index_header'
    import SearchCar from '../../components/search_car'
    import storeJs from 'storejs'

    export default {
        name: "Index",
        components: {
            Footer,
            Header,
            SearchCar,

        },
        data() {
            return {
                value: "",
                storyList: [],
                list: [],
                articleList: [],
                loading: false,
                finished: false,
                adArr: [],
                car_show: 0,
                page: 1,
            }
        },
        computed: {},
        mounted: function () {
            //广告
            this.value = this.$route.query.keyword;

            this.onLoad();
        },
        methods: {
            onLoad() {
                let key = this.value;
                let that = this;
                this.$api.car.searchCarKeyword(key).then(res => {
                    res = res.data;

                    that.list=res.data.carList;
                    that.articleList=res.data.article.data;
                })
            },


            seaCancel() {
                window.scrollTo(0, 0);
                this.car_show = 0;
            },
            //搜索
            searchKeyword() {
                let key = this.value;
                let storyList = storeJs.get("searchList");
                if (storyList.indexOf(key) === -1) {
                    if (storyList.length > 10) {
                        storyList.splice(0, 1)
                    }
                    storyList.push(key)
                }
                storeJs.set("searchList", storyList);

                this.onLoad();
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
</style>
